<template>
  <a-drawer
    :visible="true"
    placement="right"
    width="1200px"
    class="avic-sidebar-drawer"
    :body-style="{ padding: '0', display: 'flex', 'flex-direction': 'column' }"
    @close="closeModal"
  >
    <template #closeIcon>
      <avic-icon svg="avic-close-circle-fill" />
    </template>
    <div class="guided-form-header-wrapper">
      <div class="header-title">
        <div style="display: flex">
          <span v-if="!showHeaderDetail" class="header-icon-area" :style="{ marginRight: '10px' }">
            <picture-outlined class="header-icon" />
          </span>
          <div>
            <span class="header-title-text">项目名称</span>
            <span :class="showHeaderDetail ? 'header-sub-title' : 'header-sub-title-collapse'">
              创建人：{{ proxy.$getLoginUser.name }} | 采购订单包含抬头、明细、条款等内容
            </span>
          </div>
        </div>
        <a-space>
          <a-button title="查看审批" type="primary">查看审批</a-button>
          <a-button title="编辑" type="primary" ghost>编辑</a-button>
          <a-button title="拿回" type="primary" ghost>拿回</a-button>
          <a-dropdown>
            <a-button type="primary" ghost>
              <avic-icon svg="avic-more-fill" />
            </a-button>
            <template #overlay>
              <a-menu>
                <a-menu-item key="import">导入</a-menu-item>
                <a-menu-item key="export">导出</a-menu-item>
                <a-menu-item key="publish">发布</a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </a-space>
      </div>
      <div v-show="showHeaderDetail" id="header-detail" class="header-detail-wrapper">
        <span class="header-icon-area">
          <picture-outlined class="header-icon" />
        </span>
        <span class="header-detail-area" style="flex-basis: 30%">
          <div class="header-detail-title" title="基本信息">基本信息</div>
          <a-list :grid="{ column: 2 }" :data-source="headerState.infoList">
            <template #renderItem="{ item }">
              <a-list-item>{{ item.title }}: {{ item.content }}</a-list-item>
            </template>
          </a-list>
        </span>
        <span class="header-detail-area">
          <div class="header-detail-title" title="金额">金额</div>
          <span class="header-detail-content">
            <span style="color: tomato">{{ headerState.money }}</span>
            CNY
          </span>
        </span>
        <span class="header-detail-area">
          <div class="header-detail-title" title="状态">状态</div>
          <span class="header-detail-content">
            <span style="color: RGB(51, 112, 255)">
              <flag-outlined />
              {{ headerState.state }}
            </span>
          </span>
        </span>
        <span class="header-detail-area">
          <div class="header-detail-title" title="交付情况">交付情况</div>
          <span class="header-detail-content"><a-progress :percent="headerState.progress" /></span>
        </span>
        <span class="header-detail-area">
          <div class="header-detail-title" title="评分">评分</div>
          <span class="header-detail-content"><a-rate v-model:value="headerState.rate" allow-half /></span>
        </span>
      </div>
      <div class="operate-icon-area">
        <down-outlined :rotate="isExpanded ? 180 : 0" class="operate-icon" @click="handleExpandIcon" />
        <pushpin-outlined v-show="showHeaderDetail" class="operate-icon" :class="{ 'fix-operate-icon': isFixed }" @click="handleFixIcon" />
      </div>
    </div>
    <a-spin :spinning="loading" style="margin-top: 10px">
      <div class="guided-form-content-wrapper">
        <!-- Anchor 锚点形式 -->
        <a-anchor :affix="false" :target-offset="16" :get-container="getContainer" @click="handleClickAnchor">
          <a-anchor-link v-for="(item, $index) in steps" :key="$index" :href="'#' + item.id" :title="item.title" />
        </a-anchor>
        <a-form ref="formRef" :model="form" layout="vertical" v-bind="layout" class="form-wrapper avic-currentStep-content">
          <DemoMainNestDetailStep1 :id="steps[0].id" ref="demoMainNestStep1" :form="form" :form-id="formId" />
          <DemoMainNestDetailStep2 :id="steps[1].id" ref="demoMainNestStep2" :form="form" :form-id="formId" />
          <DemoMainNestDetailStep3 :id="steps[2].id" ref="demoMainNestStep3" :form="form" :form-id="formId" @close="closeModal" />
        </a-form>

        <!-- Tabs 标签页形式 -->
        <!-- <a-form ref="formRef" :model="form" layout="vertical" v-bind="layout" class="form-wrapper">
          <a-tabs v-model:activeKey="activeKey">
            <a-tab-pane key="1" :tab="steps[0].title">
              <DemoMainNestDetailStep1 ref="demoMainNestStep1" :form="form" :form-id="formId" />
            </a-tab-pane>
            <a-tab-pane key="2" :tab="steps[1].title" force-render>
              <DemoMainNestDetailStep2 ref="demoMainNestStep2" :form="form" :form-id="formId" />
            </a-tab-pane>
            <a-tab-pane key="3" :tab="steps[2].title" force-render>
              <DemoMainNestDetailStep3 ref="demoMainNestStep3" :form="form" :form-id="formId" @close="closeModal" />
            </a-tab-pane>
          </a-tabs>
        </a-form> -->
      </div>
    </a-spin>
  </a-drawer>
</template>
<script lang="ts" setup>
import { useDemoMainNestForm, emits } from './ts/DemoMainNestForm'; // 引入表单ts
import DemoMainNestDetailStep1 from './DemoMainNestDetailStep1.vue';
import DemoMainNestDetailStep2 from './DemoMainNestDetailStep2.vue';
import DemoMainNestDetailStep3 from './DemoMainNestDetailStep3.vue';

const props = defineProps({
  formId: {
    type: String,
    default: ''
  }
});
const emit = defineEmits(emits);

const headerState = reactive({
  infoList: [
    { title: '申请单编号', content: 'RHX-YTS-UUYY-6036' },
    { title: '人员ID', content: 'RTX-0023-2032' },
    { title: '签约单位', content: '核九院' },
    { title: '电话', content: '7899 9999' }
  ],
  money: '1056.00',
  state: '进行中',
  progress: 60,
  rate: 3.5
});
const showHeaderDetail = ref(true); // 表头详情显隐
const isFixed = ref(false); // 固钉显示表头详情
const isExpanded = ref(true); // 折叠/展开表头详情
const isShowOnScroll = ref(true); // 滚动触发表头详情显隐
// const activeKey = ref('1'); // tab 标签页形式展开项

/** Anchor 锚点指定滚动的容器 */
function getContainer() {
  // 给组件指定渲染的容器，解决锚点不会随页面滚动而移动的问题
  return document.querySelector('.form-wrapper');
}
/** Anchor 锚点形式点击锚点 */
function handleClickAnchor(e, link) {
  // 阻止点击的默认事件修改路由
  e.preventDefault();
  if (link.href) {
    const element = document.querySelector(link.href);
    element && element.scrollIntoView({ block: 'start', behavior: 'smooth', alignToTop: 'false' });
  }
}
/** 展开/收起表头详情 */
function handleExpandIcon() {
  isExpanded.value = !isExpanded.value;
  showHeaderDetail.value = isExpanded.value;
  if (isExpanded.value === false) {
    isFixed.value = false;
  }
}
/** 屏幕滚动事件 */
function handleScroll() {
  if (!isFixed.value && document.querySelector('.form-wrapper')) {
    const { scrollTop } = document.querySelector('.form-wrapper');
    // 计算固定位置的偏移量
    // fixedOffset.value = document.getElementById('header-detail').offsetTop;
    if (scrollTop > 30) {
      isShowOnScroll.value = false;
    } else {
      isShowOnScroll.value = true;
    }
    showHeaderDetail.value = isShowOnScroll.value;
    isExpanded.value = isShowOnScroll.value;
  }
}
/** 点击固钉 */
function handleFixIcon() {
  isFixed.value = !isFixed.value;
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll, true);
});
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
const { proxy, steps, form, formRef, layout, loading, closeModal, demoMainNestStep1, demoMainNestStep2, demoMainNestStep3 } =
  useDemoMainNestForm({
    props,
    emit
  });
</script>
<style lang="less" scoped>
.guided-form-content-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  :deep(.ant-anchor) {
    display: flex;
  }
  .form-wrapper {
    flex: 1 0 0;
    overflow: auto;
    padding: 16px;
    background-color: #f2f3f5;
  }
  :deep(.ant-anchor-ink::before) {
    background: #ffffff;
  }
  :deep(.ant-anchor-link) {
    padding: 0 16px;
  }
  :deep(.ant-anchor-link > .ant-anchor-link-title) {
    padding: 8px 0;
    color: #1d2129;
    border-bottom: 3px solid #ffffff;
  }
  :deep(.ant-anchor-link-active > .ant-anchor-link-title) {
    color: #1d2129;
    border-bottom: 3px solid @primary-color;
  }
}
.guided-form-header-wrapper {
  padding: 0 24px;
  .header-title {
    display: flex;
    justify-content: space-between;
  }
  .header-title-text {
    color: #202d40;
    font-size: 18px;
    font-weight: 700;
  }
  .header-sub-title {
    font-size: 12px;
    color: #86909c;
    margin-left: 8px;
  }
  .header-sub-title-collapse {
    font-size: 12px;
    color: #86909c;
    display: block;
  }
  .header-detail-wrapper {
    margin-top: 10px;
    display: flex;
    .header-detail-area {
      margin-left: 8px;
      flex: 1 1 0;
      align-items: flex-start;
      .header-detail-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        color: #4e5969;
        font-size: 14px;
        margin-bottom: 6px;
      }
      :deep(.ant-list-item) {
        margin-bottom: 6px;
        color: #1d2129;
      }
      .header-detail-content {
        line-height: 16px;
      }
    }
  }
  .operate-icon-area {
    display: flex;
    justify-content: center;
    .operate-icon {
      border-radius: 50%;
      border: 1px solid #cacdd4;
      padding: 4px;
      margin: 0 4px;
      color: #7b7c89;
      position: relative;
      background: #ffffff;
    }
    .fix-operate-icon {
      color: @primary-color;
      border: 1px solid @primary-color;
    }
  }
  .operate-icon-area::before {
    content: '';
    width: 50%;
    height: 2px;
    background-image: linear-gradient(to right, #ffffff, #d3d6dc, #ffffff);
    position: absolute;
    margin-top: 10px;
  }
  .header-icon-area {
    width: 56px;
    height: 56px;
    border-radius: 4px;
    background: @primary-color;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    .header-icon {
      font-size: 32px;
      line-height: 32px;
      color: white;
    }
  }
}
</style>
